<template>
	<view style="background: white;">
		<nav_bar title='首页'></nav_bar>
		<view style="height: 60px;"></view>
		<!-- 头部轮播 -->
		<swiper :indicator-dots="true" class="swiper">
			<swiper-item>
				<u-grid :border="false" col="4">
					<u-grid-item v-for="(listItem,listIndex) in list" :key="listIndex">
						<!-- <u-icon :customStyle="{paddingTop:20+'rpx'}" :name="listItem.name" :size="35"></u-icon> -->
						<image :src="listItem.imageSrc" style="width: 45px;height: 45px;"></image>
						<text class="grid-text">{{listItem.title}}</text>
					</u-grid-item>
				</u-grid>
			</swiper-item>
			<swiper-item>
				<u-grid :border="false" col="4">
					<u-grid-item v-for="(listItem,listIndex) in list" :key="listIndex">
						<!-- <u-icon :name="listItem.name" :size="35"></u-icon> -->
						<image :src="listItem.imageSrc" style="width: 45px;height: 45px;"></image>
						<text class="grid-text">{{listItem.title}}</text>
					</u-grid-item>
				</u-grid>
			</swiper-item>
			<swiper-item>
				<u-grid :border="false" col="4">
					<u-grid-item v-for="(listItem,listIndex) in list" :key="listIndex">
						<!-- <u-icon :customStyle="{paddingTop:20+'rpx'}" :name="listItem.name" :size="35"></u-icon> -->
						<image :src="listItem.imageSrc" style="width: 45px;height: 45px;"></image>
						<text class="grid-text">{{listItem.title}}</text>
					</u-grid-item>
				</u-grid>
			</swiper-item>
		</swiper>
		<!-- 头部轮播 -->
		<p class="business"><span class="line3">≡</span>附近商家</p>
		<!-- 商品列表 -->
		<view class="Product_list">

			<dl v-for="(item,index) in list1" :key="index" @click="clickDetails(item.id)">

				<dt><img :src="item.logo" alt="" /></dt>
				<dd>
					<view class="title">
						<p class="brand">品牌</p>
						<h3>{{item.shopname}}</h3><span>{{item.score}}分</span>
					</view>
					<b class="Guaranteed_ticket">保准票</b>
					<uni-rate allow-half :value="item.score" />
					<view style="display: flex;">
						<p class="Monthly_sales">月售{{item.MonthlySales}}单</p>
						<p class="describe">{{item.content}}</p>
					</view>
					<p class="Delivery_fee">{{item.fee}}￥起送/配送费5￥</p><span class="Starting">起点转送</span>
				</dd>
			</dl>
		</view>
		<!-- 商品列表 -->
	</view>
</template>

<script>
	import {
		ipconfig
	} from '../../ipconfig.js'
	export default {
		components: {},
		data() {
			return {
				list: [{
						name: 'lock',
						imageSrc: 'https://img2.baidu.com/it/u=1585103121,1179893402&fm=253&fmt=auto&app=138&f=JPEG?w=670&h=447',
						title: '甜品饮品'
					},
					{
						name: 'lock',
						imageSrc: 'https://img01.jituwang.com/170308/257061-1F30Q0432896.jpg',
						title: '商超便利'
					},
					{
						name: 'star',
						imageSrc: 'https://d00.paixin.com/thumbs/1419868/12532249/staff_1024.jpg',
						title: '美食'
					},
					{
						name: 'hourglass',
						imageSrc: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.alicdn.com%2Fbao%2Fuploaded%2Fi3%2F2211474771137%2FO1CN01GJF8AI1KGn0GOXP9h_%21%212211474771137.jpg_400x400.jpg&refer=http%3A%2F%2Fimg.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1718969556&t=052e89a1958525153194dfae34d9a8ad',
						title: '简餐'
					},
					{
						name: 'home',
						imageSrc: 'https://img2.baidu.com/it/u=2498765768,3308987827&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
						title: '新店特惠'
					},
					{
						name: 'star',
						imageSrc: 'https://img1.baidu.com/it/u=580626738,1398424711&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
						title: '准时达'
					},
					{
						name: 'home',
						imageSrc: 'https://pic.quanjing.com/hl/9k/QJ5103997513.jpg?x-oss-process=style/794ws',
						title: '预订早餐'
					},
					{
						name: 'star',
						imageSrc: 'https://pic.quanjing.com/v2/ft/QJ5104178041.jpg?x-oss-process=style/794ws',
						title: '土豪推荐'
					},
				],
				list1: [],
			}
		},
		onLoad() {
			let _this = this;
			uni.request({
				url: `http://${ipconfig}:8002/admin/shoplists`, //仅为示例，并非真实接口地址。
				method: 'get',
				success: (res) => {
					console.log(res.data);
					_this.list1 = res.data
				}
			});
		},
		methods: {
			clickDetails(id) {
				console.log(id, '首页');
				uni.request({
					url: `http://${ipconfig}:8002/admin/shoplistone?id=${id}`, //仅为示例，并非真实接口地址。
					method: 'get',
					success: (res) => {
						console.log(res.data, '商品详情数据 首页打印');
						let resList = JSON.stringify(res.data);
						uni.navigateTo({
							url: `/pages/details/details?res=${resList}`
						});
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.swiper {
		height: 420rpx;
	}

	.swiper1 {
		width: 100%;
		height: 80%;
		// background: pink;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;

		dl {
			text-align: center;

			dt {
				img {
					width: 77px;
					height: 77px;
				}
			}
		}
	}

	.grid-text {
		font-size: 14px;
		color: #909399;
		box-sizing: border-box;
		padding: 20rpx 0 20rpx 0rpx;
	}

	.business {
		display: flex;
		padding-left: 10px;
		color: #595959;
		// background: red;
		align-items: center;
		border-bottom: thick double #02A774;

		.line3 {
			font-size: 25px;
		}
	}

	.Product_list {
		// background: pink;
		width: 100%;

		dl {
			width: 100%;
			height: 110px;
			// background: greenyellow;
			border-bottom: 1px solid #ccc;
			display: flex;
			cursor: pointer;

			dt {
				img {
					width: 80px;
					height: 80px;
					border-radius: 8px;
					display: inline-block;
					margin: 10px;
				}
			}

			dd {
				// background: yellow;
				width: 72%;
				position: relative;

				.title {
					display: flex;
					width: 210px;
					margin-top: 10px;
					align-items: center;
					position: relative;

					h3 {
						font-size: 16px;
						margin-left: 10px;
					}

					span {
						color: red;
						font-size: 12px;
						font-weight: 900;
						position: absolute;
						right: 0;
					}

					.brand {
						width: 40px;
						height: 20px;
						line-height: 20px;
						background: #FFD930;
						text-align: center;
						border-radius: 5px;
						font-weight: 600;
						font-size: 13px;
					}
				}

				.Guaranteed_ticket {
					position: absolute;
					right: 5px;
					top: 10px;
					color: #949494;
					font-size: 11px;
				}

				.Monthly_sales {
					color: #868686;
					font-size: 12px;
				}

				.describe {
					margin-left: 10px;
					color: #02A774;
					font-size: 12px;
				}

				.Delivery_fee {
					color: #666666;
					display: inline-block;
					font-size: 11px;
				}

				.Starting {
					float: right;
					font-size: 11px;
					border: 2px solid #4FBC9B;
					border-radius: 5px;
					color: #02A774;
					margin-right: 5px;
					padding: 0 5px;
				}
			}
		}
	}
</style>